<template>
    <div class="rightmsg">
        <titleItem titletext="小组销售额" style="flex-shrink: 0;">
            <div class="saleroombox">
                <div class="topmsg">
                    <div class="msg">
                        <div class="msgitem">
                            <div class="label" @drag="handleTouchStart">总收入</div>
                            <div class="value gradient-text">{{ formatCurrency(deptmsginfo.count, '¥') }}
                            </div>
                        </div>
                        <div class="msgitem">
                            <div class="label">发薪</div>
                            <div class="value gradient-text">{{ formatCurrency(deptmsginfo.pay, '¥') }}
                            </div>
                        </div>
                        <div class="msgitem">
                            <div class="label">长期保</div>
                            <div class="value gradient-text">{{ formatCurrency(deptmsginfo.period, '¥') }}</div>
                        </div>
                        <div class="msgitem">
                            <div class="label">日日保</div>
                            <div class="value">
                                <span class="gradient-text">{{ formatCurrency(deptmsginfo.wesure, '¥') }}</span>
                            </div>
                        </div>
                        <div class="msgitem">
                            <div class="label">团意日保</div>
                            <div class="value">
                                <span class="gradient-text">{{ formatCurrency(deptmsginfo.tyx, '¥') }}</span>
                            </div>
                        </div>
                        <div class="msgitem">
                            <div class="label">电子签</div>
                            <div class="value">
                                <span class="gradient-text">{{ formatCurrency(deptmsginfo.ele, '¥') }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="ldt" ref="chartRef"></div>
                </div>
                <div class="groupbox">
                    <!-- <el-carousel height="120px" :motion-blur="true" autoplay arrow="never" indicator-position="none"
                        :interval="15000" loop initial-index="0" @change="onChangeaSwiperfn"> -->
                    <el-carousel height="120px" :motion-blur="true" :autoplay="false" indicator-position="none" loop
                        initial-index="0" ref="swiperOne" @change="onChangeaSwiperfn">
                        <el-carousel-item v-for="(j, k) in grouplist" :key="k"
                            style="display: flex; align-items: center;gap: 3%;">
                            <div v-for="(item, i) in grouplist[k]" :key="i"
                                style="flex-basis: 30% !important; flex-shrink: 0"
                                :class="{ groupboxitemout: true, activeitem: i === currenttab1 && currentTab === k }">
                                <div class="groupboxitem">
                                    <div class="fw700 fs-18 fc7AA3CC mg-b-12 textshadow"
                                        style="overflow: hidden; width: 100%;white-space: nowrap;text-align: center;">{{
                                            item.deptName }}</div>
                                    <div class="fs-14 fc7AA3CC mg-b-5 activetext">{{ '成员（人）' }}</div>
                                    <div
                                        :class="{ 'fw700': true, 'fs-20': true, 'fc7AA3CC': true, 'gradient-text': i === currenttab1 }">
                                        {{ item.peopleCount }}</div>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                    <!-- <vue3-seamless-scroll :list="grouplist" :hover="false" direction="left" class="scroll-wrap"
                        :step="1">
                        <div class="ui-wrap" style="margin-left: 14px;">
                            <div v-for="(item, i) in grouplist" :key="i"
                                :class="{ groupboxitemout: true, activeitem: i === currenttab1 }"
                                @click="onChangeCurrenttab1(i)">
                                <div class="groupboxitem">
                                    <div class="fw700 fs-18 fc7AA3CC mg-b-12">{{ item.deptName }}</div>
                                    <div class="fs-14 fc7AA3CC mg-b-5">{{ '成员（人）' }}</div>
                                    <div
                                        :class="{ 'fw700': true, 'fs-20': true, 'fc7AA3CC': true, 'gradient-text': i === currenttab1 }">
                                        {{ item.peopleCount }}</div>
                                </div>
                            </div>
                        </div>
                    </vue3-seamless-scroll> -->
                </div>
            </div>
        </titleItem>
        <titleItem titletext="保司数据" style="flex-shrink: 0;">
            <div class="bsbox">
                <div class="toptab">
                    <el-carousel height="50px" :motion-blur="true" :autoplay="false" indicator-position="none"
                        ref="swiperTwo" loop initial-index="0" @change="onChangeaSwiperfnc">
                        <el-carousel-item v-for="(j, k) in bsdata" :key="k"
                            style="display: flex; align-items: center;gap: 2%;">
                            <div v-for="(item, i) in bsdata[k]" :key="i"
                                style="flex-basis: 32% !important;flex-shrink: 0"
                                :class="{ tabitem: true, activetabitem: currenttab2 === i && currentTab2c === k }">{{
                                    item.name }}</div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <!-- <div class="toptab">
                    <div :class="{ tabitem: true, activetabitem: currenttab2 === 0 }" @click="currenttab2 = 0">长期保</div>
                    <div :class="{ tabitem: true, activetabitem: currenttab2 === 1 }" @click="currenttab2 = 1">日日保</div>
                    <div :class="{ tabitem: true, activetabitem: currenttab2 === 2 }" @click="currenttab2 = 2">团意日保
                    </div>
                </div> -->
                <div class="bottommsg">
                    <div class="part part1">
                        <div class="fs-14 textfffshado">已结案件</div>
                        <div class="fs-20 fw700 gradient-text">{{ insuredata.caseClose }}</div>
                    </div>
                    <div class="part part2">
                        <div class="fs-14 textfffshado">结案金额（元）</div>
                        <div class="fs-20 fw700 gradient-text">{{ formatCurrency(insuredata.closeCaseAmount,
                            '', 2) }}
                        </div>
                    </div>
                    <div class="part part3">
                        <div class="fs-14 textfffshado">未结案件</div>
                        <div class="fs-20 fw700 gradient-text">{{ insuredata.caseUnClose }}</div>
                    </div>
                    <div class="part part4">
                        <div class="fs-14 textfffshado">成本保费（元）</div>
                        <div class="fs-20 fw700 gradient-text">{{ insuredata.costAmount ?
                            formatCurrency(insuredata.costAmount,
                                '', 2) : '0.00' }}
                        </div>
                    </div>
                    <div class="centerbox">
                        <div class="center">
                            <div class="fs-14 textfffshado">累计案件</div>
                            <div class="fs-20 fw700 gradient-text">{{ insuredata.allReportCase }}</div>
                        </div>
                        <div class="center">
                            <div class="fs-14 textfffshado">理赔率</div>
                            <div class="fs-20 fw700 gradient-text">{{ insuredata.claimRate }}%</div>
                        </div>
                    </div>
                </div>
            </div>
        </titleItem>
    </div>
</template>

<script setup lang="ts">
// import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import * as echarts from 'echarts'
import { convertToOneDimensional, formatCurrency } from '../../../utils/utils'
import titleItem from './components/titleItem.vue'
import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
import { getBiDeptInfoApi, getBiquerySalesVolumeGroupApi, getBiInsuranceDataApi, getBiinsureDataByInsuranceApi } from '../../../api/visualization/visualization'
const currentTab = ref(0)
const currentTab2c = ref(0)
const swiperOne = ref(null)
const swiperTwo = ref(null)
const onChangeaSwiperfn = (val: number) => {
    // time1.value = grouplist.value[currentTab.value].length * 5000
    currentTab.value = val
    currenttab1.value = 0
    getBiquerySalesVolumeGroupApi({
        startDate: props.filterDate[0],
        endDate: props.filterDate[1],
        deptId: grouplist.value[currentTab.value][currenttab1.value].deptId
    }).then((res: any) => {
        deptmsginfo.value = res
        data1.value = [deptmsginfo.value.pay, deptmsginfo.value.period, deptmsginfo.value.wesure, deptmsginfo.value.tyx, deptmsginfo.value.ele]
        setOption()
    })
    timerFn()
}
const onChangeaSwiperfnc = (val: number) => {
    // time2.value = bsdata.value[currentTab2c.value].length * 5000
    currentTab2c.value = val
    currenttab2.value = 0
    getBiquerySalesVolumeGroupApi({
        startDate: props.filterDate[0],
        endDate: props.filterDate[1],
        deptId: grouplist.value[currentTab.value][currenttab2.value].deptId
    }).then((res: any) => {
        deptmsginfo.value = res
        data1.value = [deptmsginfo.value.pay, deptmsginfo.value.period, deptmsginfo.value.wesure, deptmsginfo.value.tyx, deptmsginfo.value.ele]
        setOption()
    })
    timerFn()
}
const props = defineProps({
    filterDate: {
        type: Array,
        required: true,
    }
})
const currenttab1 = ref(0)
const currenttab2 = ref(0)
const bsdata = ref<any>([])
let myChart: any = null
const chartRef = ref(null)
const setOption = () => {
    myChart.setOption({
        color: ['#20DAFF'],
        radar: [
            {
                indicator: [
                    { text: '发薪' },
                    { text: '长期保' },
                    { text: '日日保' },
                    { text: '团意日保' },
                    { text: '电子签' },
                ],
                center: ['50%', '50%'],
                radius: 70,
                startAngle: 90,
                splitNumber: 4,
                shape: 'circle',
                axisName: {
                    formatter: '{value}',
                    color: 'rgba(255, 255, 255, .8)',
                    fontSize: 12
                },
                splitArea: {
                    areaStyle: {
                        color: ['rgba(0, 133, 255, 0.45)', 'rgba(0, 133, 255, 0.35)', 'rgba(0, 133, 255, 0.25)', 'rgba(0, 133, 255, 0.15)']
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(192, 192, 192, 0.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(211, 253, 250, 0)'
                    }
                }
            },
        ],
        series: [
            {
                type: 'radar',
                emphasis: {
                    lineStyle: {
                        width: 3
                    }
                },
                data: [
                    {
                        value: data1.value,
                        name: 'Data B',
                        label: {
                            show: false,
                        },
                        areaStyle: {
                            color: 'rgba(112, 193, 232, 0.6)'
                        }
                    }
                ]
            },
        ]
    })
}
const grouplist = ref<any>()
const data1 = ref<any>([])

const getBiInsuranceDatafn = async () => {
    let res: any = await getBiInsuranceDataApi()
    console.log(res, 'sgbuydygdhruy')
    getBiinsureDataByInsuranceApi({
        startDate: props.filterDate[0],
        endDate: props.filterDate[1],
        insuranceCode: res[0].code
    }).then((res: any) => {
        console.log(res, 'gdsuygdhufghu')
        insuredata.value = res
    })
    if (res.length % 3 !== 0) {
        const nuudAdd = res.slice(0, (3 - (res.length % 3)))
        res = res.concat(nuudAdd)
    }
    bsdata.value = convertToOneDimensional(res, 3)
}
const insuredata = ref<any>({})
const handleTouchStart = (val: any) => {
    console.log(val, 'sgfduygty')
}
onMounted(() => {
    getBiInsuranceDatafn()
    getBiDeptInfoApi({ type: 1 }).then((res: any) => {
        console.log(res.length % 3, '部门信息111')
        if (res.length % 3 !== 0) {
            const nuudAdd = res.slice(0, (3 - (res.length % 3)))
            res = res.concat(nuudAdd)
        }
        grouplist.value = convertToOneDimensional(res, 3)
        getBiquerySalesVolumeGroupApi({
            startDate: props.filterDate[0],
            endDate: props.filterDate[1],
            deptId: res[0].deptId
        }).then((res: any) => {
            deptmsginfo.value = res
            data1.value = [deptmsginfo.value.pay, deptmsginfo.value.period, deptmsginfo.value.wesure, deptmsginfo.value.tyx, deptmsginfo.value.ele]
            setOption()
        })
    })
    timerFn()
    myChart = echarts.init(chartRef.value)
    setOption()
})
const timer = ref<any>(null)
const timerFn = () => {
    if (timer.value) {
        clearTimeout(timer.value)
    }
    timer.value = setInterval(() => {
        currenttab1.value++
        currenttab2.value++
        if (currenttab2.value > 2) {
            (swiperTwo.value as any).next()
            currenttab2.value = 0
        }
        if (currenttab1.value > 2) {
            (swiperOne.value as any).next()
            currenttab1.value = 0
        }
    }, 5000)
}
onBeforeUnmount(() => {
    clearInterval(timer.value)
    timer.value = null
})
const onChangeCurrenttab1 = (i: number) => {
    currenttab1.value = i
    getBiquerySalesVolumeGroupApi({
        startDate: props.filterDate[0],
        endDate: props.filterDate[1],
        deptId: grouplist.value[currentTab.value][currenttab1.value].deptId
    }).then((res: any) => {
        deptmsginfo.value = res
        data1.value = [deptmsginfo.value.pay, deptmsginfo.value.period, deptmsginfo.value.wesure, deptmsginfo.value.tyx, deptmsginfo.value.ele]
        setOption()
    })
}
watch(() => props.filterDate, (New, Old) => {
    getBiquerySalesVolumeGroupApi({
        startDate: props.filterDate[0],
        endDate: props.filterDate[1],
        deptId: grouplist.value[currentTab.value][currenttab1.value].deptId
    }).then((res: any) => {
        deptmsginfo.value = res
        data1.value = [deptmsginfo.value.pay, deptmsginfo.value.period, deptmsginfo.value.wesure, deptmsginfo.value.tyx, deptmsginfo.value.ele]
        setOption()
    })
    getBiinsureDataByInsuranceApi({
        startDate: props.filterDate[0],
        endDate: props.filterDate[1],
        insuranceCode: bsdata.value[currentTab2c.value][currenttab2.value].code
    }).then((res: any) => {
        insuredata.value = res
    })
}, {
    deep: true
})

watch(() => currenttab1.value, (New, Old) => {
    if (grouplist.value[currentTab.value][New]?.deptId) {
        setTimeout(() => {
            getBiquerySalesVolumeGroupApi({
                startDate: props.filterDate[0],
                endDate: props.filterDate[1],
                deptId: grouplist.value[currentTab.value][New].deptId
            }).then((res: any) => {
                deptmsginfo.value = res
                data1.value = [deptmsginfo.value.pay, deptmsginfo.value.period, deptmsginfo.value.wesure, deptmsginfo.value.tyx, deptmsginfo.value.ele]
                setOption()
            })
        }, 0)
    } else {
        currenttab1.value = Old
    }
}, {
    // immediate: true,
    deep: true
})
watch(() => currenttab2.value, (New, Old) => {
    if (bsdata.value[currentTab2c.value][New]?.code) {
        setTimeout(() => {
            getBiinsureDataByInsuranceApi({
                startDate: props.filterDate[0],
                endDate: props.filterDate[1],
                insuranceCode: bsdata.value[currentTab2c.value][currenttab2.value].code
            }).then((res: any) => {
                insuredata.value = res
            })
        }, 0)
    } else {
        currenttab2.value = Old
    }
}, {
    // immediate: true,
    deep: true
})
const deptmsginfo = ref<any>({})
</script>

<style lang="scss" scoped>
.demo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.scroll-wrap {
    width: 100%;
    overflow: hidden;
}

.ui-wrap {
    display: flex;
    list-style: none;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.li-item {
    padding: 0;
    margin-top: 0;
    margin-left: 20px;
    width: 320px;
    text-align: center;
    color: white;
}



.textfffshado {
    color: #FFFFFF;
    text-shadow: 0px 0px 6.34px rgba(30, 121, 255, 0.8);
}

.bsbox {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 8px;

    .bottommsg {
        width: 100%;
        box-sizing: border-box;
        height: 200px;
        background-image: url('./assets/img/bs-bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        .centerbox {
            box-sizing: border-box;
            padding: 20px;
            width: 140px;
            height: 140px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 16px;
        }

        .center {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .part {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .part1 {
            position: absolute;
            top: 10px;
            left: 0;
            padding-left: 20px;
        }

        .part2 {
            position: absolute;
            top: 10px;
            right: 0;
        }

        .part3 {
            position: absolute;
            bottom: 10px;
            left: 0;
            padding-left: 20px;
        }

        .part4 {
            position: absolute;
            bottom: 10px;
            right: 0;
        }
    }

    .toptab {
        margin-bottom: 43px;
        width: 100%;

        .activetabitem {
            background-image: url('./assets/img/bs-data-active-bg.png') !important;
            color: #DAF9FF !important;
            text-shadow: 0px 0px 16px rgba(0, 195, 255, 0.5);
        }

        .tabitem {
            cursor: pointer;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #7AA3CC;
            font-size: 18px;
            font-weight: 700;
            background-image: url('./assets/img/bs-data-bg.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    }
}

.activeitem {
    border: 1px solid #00D0FF !important;
    box-shadow: inset 0px -1px 19px 0px rgba(0, 214, 255, 0.3), inset 0px 0px 6px 0px rgba(0, 208, 255, 0.5) !important;
    background: radial-gradient(29% 9% at 50% 100%, rgba(0, 214, 255, 0.5871) 0%, rgba(0, 109, 255, 0) 100%), radial-gradient(49% 24% at 50% 100%, rgba(0, 160, 255, 0.2) 0%, rgba(0, 109, 255, 0) 100%), radial-gradient(55% 47% at 50% 100%, rgba(0, 193, 255, 0.1) 0%, rgba(0, 109, 255, 0) 100%), linear-gradient(180deg, rgba(0, 63, 126, 0.1) 0%, rgba(0, 68, 132, 0.2) 100%);

    .textshadow {
        text-shadow: 0px 0px 16px rgba(0, 195, 255, 0.5) !important;
        color: #DAF9FF !important;
    }

    .activetext {
        color: #FFFFFF !important;
    }

    .groupboxitem {
        border: 1px solid #279DFF !important;
        background: rgba(255, 255, 255, 0.01) !important;
    }
}

.gradient-text {
    background: linear-gradient(180deg, #FFFFFF 25%, #8DD8E9 57%, #00C3DF 72%);
    /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
    -webkit-background-clip: text;
    /*将设置的背景颜色限制在文字中*/
    -webkit-text-fill-color: transparent;
    /*给文字设置成透明*/
}

.fc7AA3CC {
    color: #7AA3CC;
}

.fw700 {
    font-weight: 700;
}

.groupbox {
    width: 100%;
    box-sizing: border-box;
    // display: flex;
    // align-items: center;
    // gap: 14px;

    .groupboxitem {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 8px;
        border-radius: 8px;
        box-sizing: border-box;
        border: 1px solid #7AA3CC;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .groupboxitemout {
        cursor: pointer;
        box-sizing: border-box;
        padding: 8px;
        border-radius: 8px;
        border: 1px solid #7AA3CC;
        box-sizing: border-box;
        flex: 1;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: linear-gradient(180deg, rgba(122, 163, 204, 0) 0%, rgba(122, 163, 204, 0.2) 100%);
    }
}

.saleroombox {
    width: 100%;
    padding: 7px 14px;
    box-sizing: border-box;

    .topmsg {
        box-sizing: border-box;
        margin-bottom: 20px;
        display: flex;
        height: 210px;
        width: 100%;
        box-sizing: border-box;

        .msg {
            flex: 1;
            display: flex;
            justify-content: space-around;
            flex-direction: column;

            .msgitem {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 12px;

                .label {
                    width: 60px;
                    text-align: end;
                    font-size: 14px;
                    color: #FFFFFF;
                }

                .value {
                    font-size: 20px;
                }
            }
        }

        .ldt {
            width: 240px;
            height: 100%;
            flex-shrink: 0;
        }
    }
}

.rightmsg {
    flex-shrink: 0;
    width: 29%;
    -ms-overflow-style: none;
    /* IE 10+ */
    overflow-y: scroll;
    // width: 500px;
    height: calc(100vh - 240px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}

.textshadow {
    text-shadow: 0px 0px 16px rgba(0, 195, 255, 0.5);
}
</style>